<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      请输入您的用户ID，我们将根据您的历史行为靶向推荐天气情况给您。
    </p>

    <div style="margin-bottom:30px; display:inline" >
      <el-form :inline="true">
      <el-form-item >
        <label slot="label">用户ID<i class="el-icon-edit"></i></label>
      <el-input type="text" v-model="stdNum" placeholder="请输入用户ID" class="showLine" > &nbsp;</el-input>
      </el-form-item>
      <el-form-item label="建议条数">
      <el-input type="text" v-model="nums" placeholder="请输入建议的条数" class="showLine"> &nbsp;</el-input>
      </el-form-item>
      <el-button @click="submit_axios()" class="showLine"> 提交</el-button>
      </el-form>

    </div>

    <div style="margin:0 auto;">
      <el-table
          :data="tips"
          stripe
          fixed
          style="width: 100%">
        <el-table-column
            prop="temperature"
            label="气温"

            sortable
        >
        </el-table-column>
        <el-table-column
            prop="humidity"
            label="湿度"

            sortable
        >
        </el-table-column>
        <el-table-column
            prop="wind_speed"
            label="风速"
            sortable
        >
        </el-table-column>
        <el-table-column
            prop="visibility"
            label="能见度"
            sortable
        >
        </el-table-column>
        <el-table-column
            prop="pressure"
            label="大气压"

            sortable
        >
        </el-table-column>
        <el-table-column
            prop="wind_bearing"
            label="风向">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>

<script>
import axios from "axios";

export default {
  name: 'HelloWorld',
  data() {
    return {
      show: true,
      tips: [],
      stdNum: '',
      nums: '',

    }

  },
  props: {
    msg: String
  },
  methods: {

    submit: function () {
      const obj = {
        stdNum: this.stdNum,
        nums: this.nums
      }
      fetch('http://127.0.0.1:8000/weather/test/', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(obj),
      })
          .then(response => {
            console.log(response);
            response.json();
            // console.log(response.json());
            // console.log(response.json());

          })
          .then(data => {
            this.show = true
            console.log('Success:', data);
            this.tips = data.pre
            // .pre.map( (item)=>{
            // console.log(item)

            // })
            console.log(this.tips)
          })
          .catch((error) => {
            console.error('Error:', error);
          });

    },
    submit_axios: function () {
      axios.get('http://119.23.182.180:10000/weather/test/', {
        params: {
          stdNum: this.stdNum,
          nums: this.nums
        }
      }).then(res => {
        // console.log(res);
        console.log(res.data.pre);
        this.tips = res.data.pre;

      })
    }


  },
  mounted() {
    this.tips = []
    this.show = true
  },
   beforeCreate () {
    this.$nextTick(()=>{
      document.body.setAttribute('style', 'background:#F3FAFA')
    })
  },
  beforeDestroy:function () {
    document.body.removeAttribute('style')
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #f17173;
}
p{
    color:grey;
}
.showLine{
  display: inline;
}
</style>
